<template>
	<el-dialog
		:title="`体育场馆赛事模版-“${curData.templateName}”详情`"
		:visible="visible"
		width="1200px"
		class="rempadding"
		:destroy-on-close="true"
		:before-close="handleClose"
		@close="handleClose"
	>
		<el-table
			v-loading="loading"
			element-loading-spinner="el-icon-loading"
			size="mini"
			class="small-size-table"
			:data="data"
			style="width: 100%; margin: 15px 0"
			:max-height="tableHeight"
			:header-cell-style="getRowClass"
			highlight-current-row
		>
			<el-table-column
				prop="sportName"
				width="150"
				align="center"
				label="联赛等级"
			></el-table-column>
			<el-table-column
				v-for="(item, index) in 20"
				:key="item"
				:prop="`value${index + 1}`"
				align="center"
				:label="index + 1"
			></el-table-column>
			<el-table-column
				prop="value21"
				align="center"
				label="未评级"
			></el-table-column>
		</el-table>
	</el-dialog>
</template>

<script>
import list from '@/mixins/list'

export default {
	components: {},
	mixins: [list],
	props: {
		curData: {
			type: Object,
			default: {}
		},
		visible: {
			type: Boolean,
			default: false
		},
		handleVisible: {
			type: Object,
			default: () => {}
		},
		parentData: { type: Object, default: () => ({}) }
	},
	data() {
		return {
			businessModelData: '',
			loading: false,
			tableHeight: 480,
			data: []
		}
	},
	mounted() {
		this.getData()
	},
	methods: {
		// 获取代理账号信息
		getData() {
			this.loading = true
			this.$api
				.getTyLimitRedDetails(this.parentData)
				.then((res) => {
					this.loading = false
					this.data = res.data || []
				})
				.catch(() => {
					this.loading = false
				})
		},
		handleClose() {
			this.$emit('update:visible', false)
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .rempadding .el-dialog__header {
	color: #909399;
	font-weight: 700;
}
::v-deep .rempadding .el-dialog__body {
	padding: 0;
	padding-bottom: 30px;
	.contentBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.contentBox,
	form {
		padding: 0 20px;
	}
}

::v-deep .el-icon-question:after {
	font-size: 16px;
	margin-left: 0;
}
</style>
